<template>
	<view class="container">
		<navbar title="代理招募" :isBack="false"></navbar>
		<view class="main" :style="{paddingTop: getNavbarHeight()  + 'px'}">
			<zero-lazy-load v-if="agent_apply == 0" imgMode='widthFix'
				image="https://qn.mtj.cdydsy.com/user_client/image/agents-base.jpg" class="image"></zero-lazy-load>
			<zero-lazy-load v-if="agent_apply == 1" imgMode='widthFix'
				image="https://qn.mtj.cdydsy.com/user_client/image/agent-base1.jpg" class="image"></zero-lazy-load>
			<zero-lazy-load v-if="agent_apply == 2" imgMode='widthFix'
				image="https://qn.mtj.cdydsy.com/user_client/image/agent-base2.jpg" class="image"></zero-lazy-load>
			<zero-lazy-load v-if="agent_apply == 3" imgMode='widthFix'
				image="https://qn.mtj.cdydsy.com/user_client/image/agent-base3.jpg" class="image"></zero-lazy-load>
			<view class="click-left" @click="jump(10)" :style="{top:(getNavbarHeight() + 162.5) + 'px'}"></view>
			<view class="click-right" @click="jump(20)" :style="{top:(getNavbarHeight() + 162.5) + 'px'}"></view>
		</view>
		<tabbar :current="2"></tabbar>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { getNavbarHeight } from '@/utils/system.js'
	import { navigateTo } from '@/utils/router.js'
	import { ref } from 'vue';

	onLoad(() => {
		// #ifndef MP-WEIXIN
		uni.hideTabBar();
		// #endif
	})

	const agent_apply = ref(1)
	const type = ref(0)

	// 跳转
	const jump = (type) => {
		type.value = type
		let navigateToResult = (agent_apply.value === 1 && type.value === 10) || (agent_apply.value === 2 && type
			.value === 20) || (agent_apply.value > 2);
		if (navigateToResult) {
			navigateTo('/subPackages/agent-application/result?type=' + type);
		} else {
			navigateTo('/subPackages/agent-application/index?type=' + type);
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.image {
			width: 750rpx;
			height: auto;
			display: block;
		}

		.click-left {
			position: absolute;
			top: 0;
			left: 20rpx;
			width: 330rpx;
			height: 600rpx;
			background-color: transparent;
		}

		.click-right {
			position: absolute;
			top: 0;
			right: 20rpx;
			width: 330rpx;
			height: 600rpx;
			background-color: transparent;
		}
	}
</style>